<style lang="scss" scoped>
@import "@/assets/css/variable";
.applyPZ {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 1.6rem;
  .box1 {
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .title {
      font-size: 1.8rem;
      font-weight: bold;
    }
    .line {
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      margin-top: 0.5rem;
      span {
        flex: 1;
      }
    }
  }
  .box2 {
    background-color: white;
    .line {
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      margin-top: 0.5rem;
      span {
        flex: 1;
      }
    }
    .title {
      font-size: 1.4rem;
      font-weight: bold;
    }
  }
  .box3 {
    background-color: white;
    text-align: center;
  }
  .tips {
    text-align: center;
    padding: 1.6rem;
    font-size: 1.1rem;
  }
}
</style>
<template>
  <div class="applyPZ">
    <div class="box1 padding-all-m border-r-l" v-if="item">
      <div class="title" :style="{ color: $store.getters.getMasterColor }">
        奖品凭证
      </div>
      <div class="line">
        <span class="label color-s">活动名称</span
        ><span class="value">{{ item.title }}</span>
      </div>
      <!-- <div class="line">
              <span class="label color-s">报名时间</span><span class="value">{{orderItem.createtime}}</span>
          </div> -->
      <div class="line">
        <span class="label color-s">商户名称</span
        ><span class="value">{{ item.merchantname }}</span>
      </div>
      <div class="line">
        <span class="label color-s">商户电话</span
        ><span class="value">{{ item.mobile }}</span>
      </div>
    </div>
    <div class="box2 padding-all-m border-r-l margT-l" v-if="item">
      <!-- <div>
              <span class="title">报名信息</span>
          </div> -->
      <!-- <div class="line">
              <span class="label color-s">姓名</span><span class="value">{{orderItem.val[0].name}}</span>
          </div>
          <div class="line">
              <span class="label color-s">联系方式</span><span class="value">{{orderItem.val[0].mobile}}</span>
          </div> -->
      <div class="line">
        <span class="label color-s">奖品名称</span
        ><span class="value"
          >{{ orderItem.name }}
          <span
            style="color: red"
            @click="orderRepay"
            v-if="orderItem.status == 1"
            >去支付</span
          ></span
        >
      </div>
      <div class="line">
        <span class="label color-s">是否已核销</span
        ><span class="value">{{
          orderItem.writeoff == 1 ? "未核销" : "已核销"
        }}</span>
      </div>
    </div>
    <div v-show="orderItem.writeoff == 1 && orderItem.prize_type_name == '自提'">
      <div class="box3 padding-all-m border-r-l margT-l">
        <canvas class="qrcode" id="qrCode-canvas"></canvas>
        <div class="t-center margT-s">核销码</div>
      </div>
      <div class="tips">Tips: 请截屏保存至手机，方便后期查找</div>
    </div>
    <!-- <div class="tips">
            {{toUrl.split('#')[1]}}
    </div> -->
    <div
      class="box3 border-r-l margT-l"
      style="padding: 10px 0"
      v-show="orderItem.writeoff == 2 && orderItem.prize_type_name == '自提'"
    >
      核销码已核销
    </div>
    <div
      class="box3 border-r-l margT-l"
      style="padding: 10px 0"
      v-show="orderItem.prize_type_name == '发货'"
    >
      请联系商家发货
    </div>
  </div>
</template>

<script>
import { Button, Toast } from "vant";
import utils from "@/assets/js/utils.js";
import QRCode from "qrcode";
export default {
  name: "ApplyPZ",
  components: {
    [Button.name]: Button,
  },
  data() {
    return {
      item: "",
      openid: "",
      myApplyInfo: {},
      toUrl: "",
      orderItem: "",
    };
  },
  mounted() {
    const _this = this;
    this.openid = _this.$store.state.openid;
    this.item = this.$store.getters.getActivityItem;
    this.orderItem = this.$store.state.orderItem;
    console.log(this.orderItem, "this.orderItem");

    if (!this.item) {
      this.$router.go(-1);
    }
    const params = {
      openid: localStorage.getItem("COPENID"),
      order_id: this.orderItem.order_id || this.orderItem.id,
    };
    this.toUrl = `${location.protocol}//${location.hostname}${
      location.href.indexOf("addons") > -1
        ? "/addons/youmi_activitys/public"
        : ""
    }/mobile/index.html#/VerificationLotto?params=${JSON.stringify(params)}`;
    this.createQrcode();
  },
  methods: {
    // 重新支付
    orderRepay() {
      const _this = this;
      let params = {
        status: 1,
        id: _this.orderItem.id,
        activity_id: _this.item.id,
      };
      this.$request
        .orderRepay(params)
        .then((res) => {
          if (res.ret == 200 && _this.item.is_need_pay == 1) {
            let weixinParams = {
              appId: res.data.appId, // 公众号appId，由商户传入
              timeStamp: res.data.timeStamp, // 时间戳
              nonceStr: res.data.nonceStr, // 随机串
              package: res.data.package,
              signType: res.data.signType, // 微信签名方式
              paySign: res.data.paySign, // 微信签名
            };
            WeixinJSBridge.invoke(
              "getBrandWCPayRequest",
              weixinParams,
              function (res) {
                // Toast(res.err_msg)
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  Toast("支付成功!");
                  // WeixinJSBridge.call('closeWindow');
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                  Toast("取消支付!");
                  // WeixinJSBridge.call('closeWindow');
                } else {
                  Toast("支付失败!");
                }
                _this.$router.go(-1);
                // WeixinJSBridge.call('closeWindow');
              }
            );
          }
        })
        .catch((res) => {
          Toast("出错了");
        });
    },
    getOrderSave() {
      const _this = this;
      let params = {
        activity_id: _this.item.id, // 活动ID
        id: _this.orderItem.id,
      };
      this.$request
        .getOrderSave(params)
        .then((res) => {
          if (res.ret == 400) {
            Dialog({ message: res.msg });
            return;
          } else if (res.ret == 200) {
            if (this.item.is_need_pay == 1) {
              let weixinParams = {
                appId: res.data.appId, // 公众号appId，由商户传入
                timeStamp: res.data.timeStamp, // 时间戳
                nonceStr: res.data.nonceStr, // 随机串
                package: res.data.package,
                signType: res.data.signType, // 微信签名方式
                paySign: res.data.paySign, // 微信签名
              };
              WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                weixinParams,
                function (res) {
                  // Toast(res.err_msg)
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    Toast("支付成功!");
                    // WeixinJSBridge.call('closeWindow');
                  } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    Toast("取消支付!");
                    // WeixinJSBridge.call('closeWindow');
                  } else {
                    Toast("支付失败!");
                  }
                  _this.$router.go(-1);
                  // WeixinJSBridge.call('closeWindow');
                }
              );
            } else {
              Toast("报名成功");
              setTimeout(function () {
                _this.$router.go(-1);
              }, 2000);
            }
          }
        })
        .catch((res) => {
          Toast("出错了");
        });
    },
    createQrcode() {
      let href = this.toUrl;
      let canvas = document.getElementById("qrCode-canvas");
      QRCode.toCanvas(canvas, href, (error) => {
        if (error) {
          console.log(error);
        } else {
          canvas.style.width = "12rem";
          canvas.style.height = "12rem";
        }
      });
    },
    getApplyInfo() {
      const _this = this;
      const apply_list = _this.item.apply_list;
      const myApplyInfo = apply_list.filter(
        (res) => res.openid == _this.openid
      );
      _this.myApplyInfo = myApplyInfo[0];
      console.log("myApplyInfo", _this.myApplyInfo);
    },
    submit() {
      const _this = this;
      _this.$refs.kfb
        .getData()
        .then((values) => {
          console.log("验证通过", values);
          console.log(
            "utils.formatDateYMDHM(new Data())",
            utils.formatDateYMDHM(new Date())
          );
          values.create_time = utils.formatDateYMDHM(new Date());
          values.openid = _this.$store.state.openid;
          values.is_sure = 0;
          values.is_pay = 0;
          //values.name = utils.formatName(values.name)
          let apply_list;
          console.log(
            "typeof _this.item.apply_list == object",
            typeof _this.item.apply_list == "object"
          );
          if (
            typeof _this.item.apply_list == "Array" ||
            typeof _this.item.apply_list == "object"
          ) {
            apply_list = _this.item.apply_list;
            apply_list.push(values);
          } else {
            apply_list = [];
            apply_list.push(values);
          }

          console.log("apply_list:::::", apply_list);
          _this.activitySave(apply_list);
        })
        .catch(() => {
          console.log("验证未通过，获取失败");
        });
    },
    activitySave(apply_list) {
      const _this = this;
      let params = {
        openid: _this.$store.state.openid,
        id: _this.item.id,
        apply_list: apply_list,
      };
      this.$request
        .activitySave(params)
        .then((res) => {
          console.log("res", res);
          if (res.ret == 200) {
            Toast("操作成功");
            setTimeout(function () {
              _this.$router.go(-1);
            }, 2000);
          }
        })
        .catch((res) => {
          Toast("出错了");
        });
    },
  },
};
</script>